<template>
	<view style="width: 100%">
		<view class="u-page">
			<u-loading-page :loading="loading" bg-color="#e8e8e8"></u-loading-page>


			<!-- 修改前 -->
			<!-- <u-row customStyle="margin: 10px">
				<u-col span="9"></u-col>
				<u-col span="3"> -->
			<!-- <uni-icons @click="handel_plus_click" style="text-align: right;" type="plus" size="30"></uni-icons> -->
			<!-- <u-button type="primary" icon="plus" shape="circle" text="创建问卷"
						@click="handel_plus_click()"></u-button>
				</u-col>
			</u-row>
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="12">
					<u-search style="z-index: 999;" :disabled='true' bgColor="rgb(255 255 255)" placeholder="搜索"
						shape="round" @click="handle_SearchBox_click" :showAction="false" :animation="true"></u-search>
				</u-col>
			</u-row> -->
			<view class="top" style="background-color: transparent;">
				<u-row customStyle="margin-bottom: 10px" class="search" >
					<u-col span="11">
						<u-search style="z-index: 999;" :disabled='true' bgColor="rgb(255 255 255)" placeholder="搜索"
							shape="round" @click="handle_SearchBox_click" :showAction="false" :animation="true"></u-search>
					</u-col>
				</u-row>
				<view class="userInfoCreate">
					<u-row customStyle="margin: 10px"  class="create" style="right:60%; height: 45%; " >
						<u-col span="12">
							<u-button type="primary" icon="plus" size="small" shape="circle" text="创建"
								@click="handel_plus_click()"  ></u-button>
						</u-col>
					</u-row>
				</view>
			</view>




			<!-- 原先存在的注释代码 -->
			<!-- 	<u-row customStyle="margin: 5px">
				<u-col span="10">
					<u-search style="z-index: 999" :disabled="true" bgColor="rgb(255 255 255)" placeholder="搜索"
						shape="round" @click="handle_SearchBox_click" :showAction="false" :animation="true"></u-search>
				</u-col>
				<u-col span="2">
					<u-button type="primary" icon="scan" @click="handle_Scan_Click" size="small" shape="circle"
						text="扫码">
					</u-button>
				</u-col>
			</u-row> -->
			<u-popup :show="show" @close="close" @open="open">
				<view style="width: 93%; align-self: center">
					<u--form labelWidth="auto" labelPosition="left" :model="queryParams" :rules="rules" ref="form1">
						<u-form-item label="答题人姓名" prop="applyName" borderBottom ref="item1">
							<u--input inputAlign="center" shape="square" border="none" v-model="queryParams.answererName">
							</u--input>
						</u-form-item>
						<u-form-item label="答题人身份证号码" prop="applyIdno" borderBottom ref="item1">
							<u--input inputAlign="center" shape="square" border="none" v-model="queryParams.answererId">
							</u--input>
						</u-form-item>
					</u--form>
					<u-row customStyle="margin:10px">
						<u-col span="12">
							<u-button class="custom-style" type="primary" size="small" @click="handel_search_click">搜索
							</u-button>
						</u-col>
					</u-row>
					<u-row customStyle="margin:10px">
						<u-col span="12">
							<u-button class="custom-style" type="primary" size="small" @click="handel_reset_click">重置
							</u-button>
						</u-col>
					</u-row>
				</view>
			</u-popup>
			<u-row customStyle="margin-bottom: 10px ">
				<u-col span="12">
					<u-empty v-if="DataList.length == 0" mode="list"></u-empty>
					<u-cell-group customStyle="background-color: white;" v-else>
						<u-cell v-for="(item, index) in DataList" :key="item.id" size="large" isLink clickable
							:title="item.answererName" :value="item.assignName" :name="item.assignId"
							@click="handel_cell_click">
						</u-cell>
					</u-cell-group>
					<uni-load-more :status="status" :contentText="loadText" @clickLoadMore="MyonLoad" />
				</u-col>
			</u-row>
		</view>
	</view>
</template>
<script>
import {
	listAssign,
	getAssign,
	delAssign,
	addAssign,
	updateAssign
} from "@/api/elder/questionnaire/assign";

import {
	transformRequest
} from "@/api/elder/ElderQuery.js";

export default {
	name: "Assign",
	dicts: ['sys_normal_disable'],
	data() {
		return {
			// 遮罩层
			loading: true,
			// 选中数组
			ids: [],
			// 子表选中数据
			checkedElderQuestionnaireAssignDetail: [],
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			// 显示搜索条件
			showSearch: true,
			// 总条数
			total: 0,
			// 发起问卷表格数据
			DataList: [],
			// 发起问卷明细表格数据
			elderQuestionnaireAssignDetailList: [],
			// 弹出层标题
			title: "",
			// 是否显示弹出层
			open: false,
			// 查询参数
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				assignName: null,
				assignType: null,
				answererId: null,
				answererName: null,
				assignStatus: null,
				autoRating: null,
				ruleId: null,
				value: null,
				level: null,
				status: null,
			},
			// 表单参数
			form: {},
			// 表单校验
			rules: {},

			show: false, //搜索框显示
			finished: false, //加载更多完结
			loadText: {
				contentdown: "点击加载更多",
				contentrefresh: "正在加载",
				contentnomore: "没有更多数据了",
			},
		};
	},
	onShow() {
		this.getList();
	},
	computed: {
		status() {
			if (this.DataList.length < this.total) {
				return "more";
			} else {
				this.finished = true;
				return "nomore";
			}
		},
	},
	methods: {
		/** 查询发起问卷列表 */
		getList() {
			this.loading = true;
			listAssign(this.queryParams).then(response => {
				console.log('getList', response)
				this.DataList = response.rows || [];
				this.total = response.total;
				this.loading = false;
			});
		},
		//加载更多合并结果
		fetch() {
			this.queryParams.pageNum = this.queryParams.pageNum + 1; //加载下一页
			listAssign(this.queryParams).then((response) => {
				if (response.code == 200) {
					this.DataList = this.DataList.concat(
						response.rows.filter((item) => !this.DataList.some((i) => i.assignId === item
							.assignId))
					);
					this.total = response.total;
				}
			});
		},
		MyonLoad(e) {
			// this.status = "loading";
			this.fetch();
			//固定返回
			e.detail = {
				status: "loading",
			};
			return e;
		},
		// 取消按钮
		cancel() {
			this.open = false;
			this.reset();
		},
		// 表单重置
		reset() {
			this.form = {
				assignId: null,
				assignName: null,
				assignType: null,
				answererId: null,
				answererName: null,
				assignStatus: "0",
				autoRating: null,
				ruleId: null,
				value: null,
				level: null,
				status: "0",
				createBy: null,
				createTime: null,
				updateBy: null,
				updateTime: null,
				remark: null,
				spare1: null,
				spare2: null,
				spare3: null
			};
			this.elderQuestionnaireAssignDetailList = [];
			this.resetForm("form");
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.pageNum = 1;
			this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.resetForm("queryForm");
			this.handleQuery();
		},
		// 多选框选中数据
		handleSelectionChange(selection) {
			this.ids = selection.map(item => item.assignId)
			this.single = selection.length !== 1
			this.multiple = !selection.length
		},
		/** 新增按钮操作 */
		handleAdd() {
			this.reset();
			this.open = true;
			this.title = "添加发起问卷";
		},
		/** 修改按钮操作 */
		handleUpdate(row) {
			this.reset();
			const assignId = row.assignId || this.ids
			getAssign(assignId).then(response => {
				this.form = response.data;
				this.elderQuestionnaireAssignDetailList = response.data.elderQuestionnaireAssignDetailList;
				this.open = true;
				this.title = "修改发起问卷";
			});
		},
		/** 提交按钮 */
		submitForm() {
			this.$refs["form"].validate(valid => {
				if (valid) {
					this.form.elderQuestionnaireAssignDetailList = this.elderQuestionnaireAssignDetailList;
					if (this.form.assignId != null) {
						updateAssign(this.form).then(response => {
							this.$modal.msgSuccess("修改成功");
							this.open = false;
							this.getList();
						});
					} else {
						addAssign(this.form).then(response => {
							this.$modal.msgSuccess("新增成功");
							this.open = false;
							this.getList();
						});
					}
				}
			});
		},
		/** 删除按钮操作 */
		handleDelete(row) {
			const assignIds = row.assignId || this.ids;
			this.$modal.confirm('是否确认删除发起问卷编号为"' + assignIds + '"的数据项？').then(function () {
				return delAssign(assignIds);
			}).then(() => {
				this.getList();
				this.$modal.msgSuccess("删除成功");
			}).catch(() => { });
		},
		/** 发起问卷明细序号 */
		rowElderQuestionnaireAssignDetailIndex({
			row,
			rowIndex
		}) {
			row.index = rowIndex + 1;
		},
		/** 发起问卷明细添加按钮操作 */
		handleAddElderQuestionnaireAssignDetail() {
			let obj = {};
			obj.orderNum = "";
			obj.value = "";
			obj.level = "";
			obj.required = "";
			obj.status = "";
			this.elderQuestionnaireAssignDetailList.push(obj);
		},
		/** 发起问卷明细删除按钮操作 */
		handleDeleteElderQuestionnaireAssignDetail() {
			if (this.checkedElderQuestionnaireAssignDetail.length == 0) {
				this.$modal.msgError("请先选择要删除的发起问卷明细数据");
			} else {
				const elderQuestionnaireAssignDetailList = this.elderQuestionnaireAssignDetailList;
				const checkedElderQuestionnaireAssignDetail = this.checkedElderQuestionnaireAssignDetail;
				this.elderQuestionnaireAssignDetailList = elderQuestionnaireAssignDetailList.filter(function (item) {
					return checkedElderQuestionnaireAssignDetail.indexOf(item.index) == -1
				});
			}
		},
		/** 复选框选中数据 */
		handleElderQuestionnaireAssignDetailSelectionChange(selection) {
			this.checkedElderQuestionnaireAssignDetail = selection.map(item => item.index)
		},
		handel_reset_click() {

		},
		handel_search_click() {

		},
		close() { },
		handle_SearchBox_click() { },
		/** 导出按钮操作 */
		handleExport() {
			this.download('elder/questionnaire/assign/export', {
				...this.queryParams
			}, `assign_${new Date().getTime()}.xlsx`)
		},
		//跳转问卷考卷页面
		handel_cell_click(item) {
			console.log("item", item);
			//跳转考试详情页，传输
			this.$tab.navigateTo("/pages/WenJuanDiaoCha/Detail/index?assignId=" + item.name);
		},
		//跳转问卷调查创建页
		handel_plus_click() {
			this.$tab.navigateTo("/pages/WenJuanDiaoCha/Add/index");
		},
		//编辑问卷调查考卷
		handle_EditDatail_click(row) {
			//URl传参跳转
			this.$router.push({
				name: `AssignDetail`,
				// path: `Evaluation/Question/${row.paperId}`,//这种方式，是在url中传参，所以在跳转的时候，需要在路由中配置path和params
				params: {
					assignId: row
						.assignId //这种传参方式，不是在url中传参，而是在路由的params中传参，所以在跳转的时候，需要在路由中配置name和params
				},
			});
		},
	}
};
</script>


<style lang="scss" scoped>
@import "../../yangLaoAppStyle.scss";

.demo-uni-row {
	margin-bottom: 10px;
	/* QQ、字节小程序文档写有 :host，但实测不生效 */
	/* 百度小程序没有 :host，需要设置block */
	/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
	display: block;
	/* #endif */
}

/* 支付宝小程序没有 demo-uni-row 层级 */
/* 微信小程序使用了虚拟化节点，没有 demo-uni-row 层级 */
/* #ifdef MP-ALIPAY || MP-WEIXIN */
/deep/ .uni-row {
	margin-bottom: 10px;
}

/* #endif */

.demo-uni-col {
	height: 36px;
	border-radius: 4px;
}

.mypage-title {
	font-size: 20px;
	font-weight: 600;
	align-self: center;
}

.wrap {
	padding: 12px;
}

.demo-layout {
	height: 25px;
	border-radius: 4px;
}

.list-cell {
	display: flex;
	box-sizing: border-box;
	width: 100%;
	padding: 10px 24rpx;
	overflow: hidden;
	color: #323233;
	font-size: 14px;
	line-height: 24px;
	background-color: #fff;
}

.custom-style {
	width: 90%;
	font-weight: bolder;
	font-size: 15px;
}
</style>